<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册表单</title>
		<style>
			h3 {
				text-align: center;
			}

			.all {
				margin: 0 auto;
				width: 600px;
				height: 600px;
				background: #9cbc2c;
				padding-top: 20px;
				border-radius: 15px;
			}

			.box1,
			.box2,
			.box3,
			.box4,
			.box5,
			.box6,
			.box7 {
				width: 560px;
				height: 60px;
				margin: 0 auto;
				margin-bottom: 20px;
				background-color: white;
				border-radius: 15px;
			}

			.box1,
			.box2,
			.box3,
			.box4,
			.box5,
			.box6,
			.box7 {
				text-align: center;
				line-height: 55px;
			}

			label {
				margin-right: 130px;
			}

			.a1 {
				margin-left: -35px;
			}

			.a2 {
				margin-left: -55px;
			}

			.a3 {
				margin-left: -55px;
				margin-right: 175px;
			}

			.box8{
				margin: auto;
				text-align: center;
			}
			button{
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<h3>注册表单</h3>
		<div class="all">
			<div class="box1">
				<label for="name">用户昵称:</label>
				<input id="names" name=names autofocus required pattern="^[a-zA-Z0-9]{6,12}$" placeholder="请输入用户名" />
			</div>
			<div class="box2">
				<label for="email">Email:</label>
				<input id="emails" type="email" name=emails required placeholder="example@domain.com" />
			</div>
			<div class="box3">
				<label for="work-age" class="a1">工作年龄:</label>
				<input type="range" id="work-age" min="18" max="60" name="work-age" />
				<output for="work-age" id="show"></output>
			</div>
			<div class="box4">
				<label for="age">年龄:</label>
				<input type="number" placeholder="你的年龄">
			</div>
			<div class="box5">
				<label for="day" class="a2">出生日期:</label>
				<input type="date">
			</div>
			<div class="box6">
				<label for="people">个人简历:</label>
				<input type="search">
			</div>
			<div class="box7">
				<label for="color" class="a3">获取颜色值:</label>
				<input type="color">
			</div>
			<div class="box8">
				<button>注册</button>
			</div>
		</div>
	</body>
</html>
